<template>
	<view>
		<view class="notes">
			<p><span>*</span>售后人员补卡信息</p>
		</view>
		<!-- 信息  -->
		<u-toast ref="uToast"></u-toast>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">补卡人员:</view>
				<view class="input">
					<text class="info">{{userName}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">设备序列号:</view>
				<view class="input">
					<text class="info">{{deviceid}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">位置:</view>
				<view class="input">
					<text class="info">{{position}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">补卡时间:</view>
				<view class="input">
					<text class="info">{{clockdate}}{{" "}}{{clocktime}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">补卡理由:</view>
				<view class="input">
					<text class="info">{{reason}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">申请时间:</view>
				<view class="input">
					<text class="info">{{applicationtime}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">申请状态:</view>
				<view class="input">
					<text class="info" style="color: royalblue; font-weight: bold;" v-if="applicationstatus == '已通过'">{{applicationstatus}}</text>
					<text class="info" style="color: coral; font-weight: bold;" v-else-if="applicationstatus == '已驳回'">{{applicationstatus}}</text>
					<text class="info" style="color: black; font-weight: bold;" v-else>{{applicationstatus}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view v-if="show">
				<text style="margin-left: 20px; margin-top: 15px; font-size: 16px;">请领导审批:</text>
				<view style="margin-left: 30px; margin-top: 15px;">
				<view class="u-page__radio-item">
					<u-radio-group
						v-model="radiovalue"
						placement="row"
						iconColor="#ffffff">
						<u-radio
							shape="square"
							:customStyle="{marginRight: '20px'}"
							v-for="(item, index) in radiolist"
							:key="index"
							:label="item.name"
							size="20"
							iconSize="25"
							:name="item.name"
							@change="radioChange"
							>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 70px; font-size: 16px;">驳回理由:</view>
				<view class="input">
					<u--input placeholder="请输入驳回理由"  border="surround" v-model="rejectReason" type="text" clearableb v-if="reasonShow "></u--input>
					<text class="info" v-else>{{rejectReason}}</text> 
				</view>
			</view>
			
		</view>
		<button class="appro-bt" @click="appro" v-if="show">审批</button>
		<u-gap height="60px" bgColor="#ffffff "></u-gap>
	</view>
</template>

<script>
	let item;
	export default{
		data(){
			return{
				show: false,
				reasonShow: false,
				radiovalue: '同意',
				//横向排列形式数据
				radiolist: [
					{
						name: '同意',
						disabled: false
					},
					{
						name: '不同意',
						disabled: false
					},
				],
				// 界面 数据 
				replacecardid: '',
				userName: '',
				deviceid: '',
				position: '',
				clockdate: '',
				clocktime: '',
				reason: '',
				rejectReason: '',  			 // 驳回理由
				applicationtime: '',		// 申请时间
				applicationstatus: '',  //状态
				workid: '',
				userid: '',
				lng: '',
				lat: ''
			
			}
		},
		onLoad(option) {
			item = JSON.parse(decodeURIComponent(option.data));
			console.log("----上一界面传递值---",item.deviceid)
			this.replacecardid = item.replacecardid;
			this.userName = item.userName;
			this.deviceid = item.deviceid;
			this.position = item.position;
			this.clockdate = item.clockdate;
			this.clocktime = item.clocktime;
			this.reason = item.reason;
			this.rejectReason = item.rejectReason;
			this.applicationtime = item.applicationtime;
			this.applicationstatus = item.applicationstatus;
			this.userid = item.userid;
			this.workid = item.workid;
			this.lng = item.lng;
			this.lat = item.lat
			if(this.applicationstatus == "待审批"){
				this.show = true;
			}
		},
		methods:{
			
			//  审批  
			appro(){
				let timeOk = null;
				let timeNo = null;
				if(this.radiovalue == "同意"){
					uni.request({
						url:"https://www.smacaftersales.com:443/replacePunch/replacePunch/passClock",
						method:'POST',
						data:{
							replacecardid: this.replacecardid,
							userid: this.userid,
							workid: this.workid,
							deviceid: this.deviceid,
							position: this.position,
							lng: this.lng,
							lat: this.lat,
							clockdate: this.clockdate,
							clocktime: this.clocktime

						},
						header: {
							"Content-Type": "application/json" ,//请求头信息
						},
						success(res) {
							console.log("-----补卡申请同意----",res);
							if(res.data.msg == "操作成功"){
								uni.showToast({
									title: "审批通过",
									duration: 1888,
									icon: 'success'
								})
								timeOk = setTimeout( () => {
									uni.navigateTo({
										url: '/pages/adminVue/ReplacementCardApprovalList'
									})			
								}, 2000)
								
							}
						}
					})
				}else{  // 驳回    
					if(this.rejectReason == '' || this.rejectReason == null){
						uni.showToast({
							title: "请确保驳回理由不为空！！！",
							duration: 1500,
							icon:'none'
						})
					}else{
						console.log("-----驳回：-----",this.replacecardid,"-----",this.rejectReason)
						uni.request({
							url: "https://www.smacaftersales.com:443/replacePunch/replacePunch/updateReplcePunch",
							method: 'POST',
							data:{
								replacecardid: this.replacecardid,
								applicationstatus: "已驳回",
								rejectReason: this.rejectReason
							},
							header: {
								"Content-Type": "application/json" ,  //请求头信息
							},
							success(res) {
								console.log("--------",res);
								if(res.data.msg == "操作成功"){
									uni.showToast({
										title: "审批已驳回",
										duration: 1888,
										icon: 'success'
									})
									timeNo = setTimeout( () => {
										uni.navigateTo({
											url: '/pages/adminVue/ReplacementCardApprovalList'
										})			
									}, 2000)
								}
								
							}
						})
					}
					
					
				}
			},
			radioChange(n){     // 单选框 状态
				this.radiovalue = n;
				switch (n){
					case '不同意':
						this.reasonShow = true
						break;
					case '同意':
						this.reasonShow = false
						break;
				}
			}
			
			
		}
		
		
		
		
	}
</script>

<style lang="scss">
	page {
	       background-color: #ffffff;
	   }
	.appro-bt{
		width: 200px;
		margin-top: 50px;
		border-radius: 25px;
		border: 3rpx solid #00a3f5;
	}
	.notes{
		width: 20%px;
		margin: 0px auto 30px;
		font-size: 14px;
		
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.info{
		font-size: 17px;
		color: #ababab;
	}
	.title{
		width: 80px;
		height: 22px;
		font-size: 16px;
	}
	
	.user-input{
		width: 335px;
		margin: 10px auto;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}
	.fenjie{
		width: 335px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}
	
	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}
</style>